<template>
  <div class="orders-preview">
    <HeaderBar />

    <a-card>
      <a-descriptions title="" style="margin-bottom: 0px;">
        <a-descriptions-item label="采购单位" span="3">
          {{ data.buy_user.name }}
        </a-descriptions-item>
        <a-descriptions-item span="3" label="项目名称">
          <div class="money-wrapper">{{ data.name }}</div>
        </a-descriptions-item>
      </a-descriptions>

      <div class="v-title">采购商品</div>

      <a-table
        style="margin: 20px 0;"
        :columns="columns"
        :bordered="false"
        :pagination="false"
        :data-source="list"
        rowKey="ID"
      >
        <div>
          {{ list }}
        </div>
        <div slot="buyNumber" slot-scope="text, record">
          {{ record.buyNumber }}{{ record.unit }}
        </div>

        <div slot="cProduct" slot-scope="text, record">
          {{ getName(record.cProduct) }}
        </div>
        <div slot="cWork" slot-scope="text, record">
          {{ getName(record.cWork) }}
        </div>
      </a-table>

      <div class="v-title">买家要求</div>

      <div class="requirement">
        <a-descriptions title="">
          <a-descriptions-item label="商品名称" span="2">
            {{ data.name }}
          </a-descriptions-item>
          <a-descriptions-item label="描述" span="2">
            {{ data.desc }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card>
  </div>
</template>

<script>
import HeaderBar from "@/components/headerBar/HeaderBar";
import { getOrder } from "@/api";

const columns = [
  {
    title: "行业",
    dataIndex: "cWork",
    scopedSlots: { customRender: "cWork" },
    align: "center"
  },
  {
    title: "品类名",
    dataIndex: "cProduct",
    scopedSlots: { customRender: "cProduct" },
    align: "center"
  },
  {
    title: "品牌或厂家",
    dataIndex: "brand",
    scopedSlots: { customRender: "brand" },
    align: "center"
  },
  {
    title: "商品名称",
    dataIndex: "name",
    scopedSlots: { customRender: "name" },
    align: "center"
  },
  {
    title: "规格或型号",
    dataIndex: "norms",
    scopedSlots: { customRender: "norms" },
    align: "center"
  },
  {
    title: "采购量",
    dataIndex: "buyNumber",
    scopedSlots: { customRender: "buyNumber" },
    align: "center"
  }
];

export default {
  components: {
    HeaderBar
  },
  data() {
    // const data = storage.getItem("ORDERS_PREVIEW") || {};
    return {
      columns,
      data: {
        buy_user: {
          name: ``
        }
      },
      list: []
    };
  },
  mounted() {
    var id = this.$route.path.replace(/[^0-9]/gi, "");
    this.getOrder(id);
  },
  methods: {
    async getOrder(id) {
      const res = await getOrder({ ID: id });
      this.data = res.data.reuserOrder;
      const detail = res.data.reuserOrder.user_order_detail;
      for (let i = 0; i < detail.length; i++) {
        this.list[i] = {
          brand: detail[i].brand, //brand
          buyNumber: detail[i].buyNumber, //购买数量
          cProduct: detail[i].cProduct, //品类名
          cWork: detail[i].cWork, //行业
          name: detail[i].name, //商品名称
          norms: detail[i].norms, //规格或型号
          perPrice: detail[i].perPrice, //单价(元)
          unit: detail[i].unit //单位,
        };
      }
    },
    getName(id) {
      for (const item of this.config.c_types) {
        if (item.ID === id) {
          return item.name;
        }

        for (const inner of item.c_types) {
          if (inner.ID === id) {
            return inner.name;
          }
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.orders-preview {
  .store-name {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .v-title {
    margin: 16px 0;
  }

  .requirement {
    padding: 0 300px 0 20px;
  }
}
</style>
